import Title from '../component/Title';
import './index.less';
import banner from '@/config/img/banner2.png';
import dan1 from '@/config/img/dan1.png';
import dan2 from '@/config/img/dan2.png';
import dan3 from '@/config/img/dan3.png';
import { useEffect, useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const PopularMore = () => {
  const characterList = [
    {
      title: '花旦(骚旦、艳旦)',
      img: dan2,
      desc: '花旦，是中国戏曲旦行中的一支，区别于正旦(北方剧种多称“青衣”)、武旦和老旦。扮演的多为天真烂漫、性格开朗的妙龄女子。也有的是属于泼辣，放荡的中、青年女性称做泼辣旦。',
    },
    {
      title: '老旦',
      img: dan3,
      desc: '多扮演正派的中年或青年妇女，面部化妆应容貌端正。扮演贫穷妇女(秦香莲)脸上虽涂抹脂粉，但不宜过重。扮演闺门妇女(像杜丽娘)眉眼画的必须清秀，脸上的脂粉要略重一',
    },
    {
      title: '彩旦',
      img: dan1,
      desc: '由丑角应工，又名丑旦。多扮演封建社会“三姑六婆”一流的反派妇女(像《能仁寺》的赛西施)，但也扮演一些滑稽诙谐的妇女(像《四进士》的万氏)。i面部化妆由于性格的不同，有涂脂粉的，也有不涂脂粉的。但大都在额角或腮边点一颗黑痣。',
    },
  ];
  const [isVisible, setIsVisible] = useState(false);
  useEffect(() => {
    setIsVisible(true);
  }, []);
  return (
    <div className="popular-more">
      <div className="banner">
        <img src={banner} alt="" />
      </div>
      <div className="more-content">
        <Title
          title="雷剧服饰"
          enTitle="LeiJu Makeup"
          className="more-title"
        ></Title>
        <CSSTransition
          in={isVisible} // 控制动画是否开始，true 表示开始动画
          timeout={5000} // 动画过渡的时间，单位毫秒
          classNames="fade" // 指定动画的 class 名称
          unmountOnExit // 动画退出时卸载组件
        >
          <div className="character-content">
            <div className="content-insert">
              {characterList.map((val) => {
                return (
                  <div className="chart-item">
                    <div className="left-item">
                      <img src={val.img} alt="" />
                      <div className="left-text">{val.title}</div>
                    </div>
                    <div className="right-item">
                      <div className="right-desc">{val.desc}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </CSSTransition>
      </div>
    </div>
  );
};

export default PopularMore;
